<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-spin :spinning="isLoading">
      <a-row>
        <a-col :span="24">
          <a-form :form="form">
            <a-form-item label="广告名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['adId', { rules: [{ required: true, message: '请选择广告' }] }]" show-search
                style="width: 200px" :default-active-first-option="false" :show-arrow="false" :filter-option="false"
                :not-found-content="null" :options="adList" @search="getOptions">
              </a-select>
            </a-form-item>
            <a-form-item label="系统类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-decorator="['type', { initialValue: adBindType.LOCAL.value }]" @change="handleChangeType"
                button-style="solid">
                <a-radio-button v-for="(item, index) in adBindType.getData()" :key="index" :value="item.value">{{
    item.name
  }}</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-if="type === adBindType.LOCAL.value" label="新系统书籍" :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select v-decorator="['bookId', { rules: [{ required: true, message: '请选择书籍' }] }]" show-search
                style="width: 100%" :default-active-first-option="false" :show-arrow="false" :filter-option="false"
                :not-found-content="null" :options="bookList" @search="getBookOptions">
              </a-select>
            </a-form-item>
            <a-form-item v-if="type === adBindType.OLD.value" label="旧系统书籍" :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select v-decorator="['bookId', { rules: [{ required: true, message: '请选择书籍' }] }]" show-search
                style="width: 100%" :default-active-first-option="false" :show-arrow="false" :filter-option="false"
                :not-found-content="null" :options="oldBookList" @search="getOldBookOptions">
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>

      <a-button type="primary" @click="handleSubmit($event, false)" :loading="isBtnLoading">提交</a-button>
      <a-button style="margin-left: 15px" type="primary" @click="handleSubmit($event, true)"
        :loading="isBtnLoading">提交并继续绑定</a-button>
      <a-button style="margin-left: 15px" @click="goBack" :loading="isBtnLoading">返回</a-button>
    </a-spin>
  </a-card>
</template>

<script>
import * as Api from '@/api/ad'
import adBindType from '@/common/enum/adBindType'
export default {
  name: 'actionForm',
  data() {
    return {
      type: adBindType.LOCAL.value,
      adId: '',
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 12 },
      tpl: null,
      typeName: '',
      // loading状态
      isLoading: false,
      isBtnLoading: false,
      adBindType,
      // 当前表单元素
      form: this.$form.createForm(this),
      adList: [],
      bookList: [],
      oldBookList: []
    }
  },
  mounted() {
    this.getOptions()
    this.getBookOptions()
    this.getOldBookOptions()
  },
  methods: {
    getOptions(name) {
      Api.getOptions({ name }).then((res) => {
        this.adList = res.data
      })
    },
    getBookOptions(name) {
      Api.getBookOptions({ name }).then((res) => {
        this.bookList = res.data
      })
    },
    getOldBookOptions(name) {
      Api.getOldOptions({ name }).then((res) => {
        this.oldBookList = res.data
      })
    },

    handleChangeType(e) {
      this.type = e.target.value
    },
    goBack() {
      this.$router.push({ path: '/ad/release' })
    },

    /**
     * 确认按钮
     */
    handleSubmit(e, goon) {
      e.preventDefault()
      const {
        form: { validateFields, setFieldsValue }
      } = this
      validateFields((errors, values) => {
        if (!errors) {
          Api.bindAd(values).then((res) => {
            if (goon) {
              this.$message.success('绑定成功，请继续', 1.5)
              setFieldsValue({ bookId: '' })
            } else {
              this.$router.push({ path: '/ad/release' })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
